<template>
  <el-container direction="vertical">
    <el-header>
      <h3>会议列表</h3> 
    </el-header>
    
    <el-row :gutter="15" class="under-page-header">
      <el-col :span="8" v-for="item in 3" :key="`${item}count`">
        <div class="col-count">
          <el-image />
          <div class="right-info">
            <p class="count-number text-primary">999</p>
            <p class="count-title">会议数量</p>
          </div>
        </div>
      </el-col>
    </el-row>
    
    <el-main>
      <div class="block-wrap">
        <el-form
          :model="searchForm"
          ref="searchForm"
          size="small"
          label-suffix="：">
          <el-row :gutter="60">
            <el-col :span="8" :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-for="item in 3" :key="`${item}search`">
              <el-form-item :label="`关键字${item}`" label-width="80px">
                <el-input v-model="searchForm.keyword" placeholder="请输入关键字"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
              <el-form-item label="">
                <el-button type="primary" icon="el-icon-search">搜 索</el-button>
                <el-button icon="el-icon-refresh-left">重 置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>


        <el-button icon="el-icon-plus" class="margin-b-15" type="primary" size="small">添 加</el-button>
        <el-button icon="el-icon-delete" class="margin-b-15" type="danger" size="small">删 除</el-button>

        <el-table :data="tableData" stripe>
          <el-table-column
            type="selection"
            width="50"
            align="center">
          </el-table-column>
          <el-table-column v-for="col in columns"
            :prop="col.id"
            :key="col.id"
            :label="col.label"
            :width="col.width ? col.width : ''">
          </el-table-column>
          <el-table-column label="会议内容" width="78">
            <template slot-scope="scope">
              <el-button type="text" size="small">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="302" align="left">
            <template slot-scope="scope">
              <el-button v-if="scope.row.status == 1" type="text" size="small" @click="$router.push({name: 'meetingDetail'})">去筹备</el-button>
              <template v-else>
                <el-button type="text" size="small" @click="$router.push({name: 'detail'})">结束会议</el-button>
                <el-button type="text" size="small">发布文件</el-button>
                <el-button type="text" size="small">发布公告</el-button>
                <el-button type="text" size="small">参会者统计</el-button>
              </template>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="margin-t-15"
          :current-page="$store.state.pagination.pageNum"
          :page-sizes="[20, 40, 80, 100]"
          :page-size="20"
          layout="total, sizes, prev, pager, next, jumper"
          :total="100" background>
        </el-pagination>
      </div>
    </el-main>
  </el-container>
</template>
<script>
  export default {
    data () {
      return {
        searchForm: {
          keyword: '',
          check: [],
          check2: []
        },
        tableData: [
          {
            series: 'dgfh5dgfjh4sh2sfg4h56fdh',
            name: '名字',
            des: '描述',
            status: 1
          },
          {
            series: 'dgfh5dgfjh4sh2sfg4h56fdh',
            name: '名字2',
            des: '描述2',
            status: 2
          }
        ],
        columns: [
          {
            id: 'series',
            label: '会议议题',
          },
          {
            id: 'name',
            label: '会议创建时间',
          },
          {
            id: 'des',
            label: '会议开始时间',
          },
          {
            id: 'status',
            label: '会议状态',
          }
        ]
      }
    },
    mounted () {
      this.getRouter()
    },
    methods: {
      /**
       * 获取路由 , 保存至面包屑
       * @return {[type]} [description]
       */
      getRouter () {
        console.log(this.$route)
        this.routes = this.$route.matched
      },
      goBack () {
        
      }
    }
  }
</script>